<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./script/main.js" type="module" id="detail"></script>
    <link rel="stylesheet" href="../reset.css">
    <link rel="stylesheet" href="./css/detail.css">
    <style>
        .bingbox {
            margin: 0 200px;
            position: absolute;
        }
        
        .wrap {
            float: left;
            position: relative;
        }
        
        #spic {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            float: left;
            position: relative;
        }
        
        #spic img {
            width: 400px;
            height: 400px;
        }
        
        #sf {
            width: 50px;
            height: 50px;
            background: orange;
            opacity: 0.3;
            position: absolute;
            left: 0px;
            top: 0px;
            visibility: hidden;
            cursor: move;
        }
        
        #bf {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            overflow: hidden;
            position: absolute;
            left: 410px;
            visibility: hidden;
            z-index: 100;
        }
        
        #bf img {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 800px;
            height: 800px;
        }
        
        #ulist {
            position: absolute;
            left: 0px;
            top: 430px;
            width: 402px;
            height: 56px;
            overflow: hidden;
        }
        
        #ulist a {
            float: left;
            width: 10px;
            height: 54px;
            border: 1px solid #ccc;
            text-decoration: none;
            line-height: 56px;
            text-align: center;
            background: #fff;
        }
        
        #list {
            float: left;
            margin-left: 18px;
            width: 372px;
            position: relative;
        }
        
        .wrap ul {
            list-style: none;
            float: left;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        
        .wrap ul li {
            float: left;
            width: 56px;
            height: 56px;
            padding-right: 6px;
        }
        
        .wrap ul li img {
            width: 52px;
            height: 52px;
            border: 1px solid #ccc;
        }
        
        #right {
            position: absolute;
            right: 0px;
            top: 0px;
            color: #333;
        }
        
        #left {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 2;
            color: #fff;
        }
        
        .goodsinfo {
            margin: 100px 0 0 100px;
        }
        
        .goodsinfo-img {
            width: 200px;
            height: 200px;
            float: left;
        }
        
        .goodsinfo-img img {
            width: 200px;
            height: 200px;
        }
        
        .goodsinfo-word {
            overflow: hidden;
            float: left;
            margin: 0 100px;
        }
        
        .p-name {
            width: 350px;
            height: 50px;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        
        .p-name .loadtitle {
            font: 16px "微软雅黑";
            color: #333;
            white-space: nowrap;
            font-weight: 600;
        }
        
        .p-name p {
            color: #666;
            margin-top: 10px;
        }
        
        .p-price {
            margin-top: 10px;
            margin-bottom: 50px;
            width: 300px;
            height: 50px;
            line-height: 50px;
        }
        
        em {
            color: #f12020;
            font-size: 23px;
        }
        
        .loadpcp {
            font-size: 23px;
            color: #f12020;
        }
        
        .box {
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            right: 30px;
            top: 0;
        }
        /* 服务 */
        
        .serve-box {
            width: 400px;
            position: relative;
            margin-top: 40px;
            margin-bottom: 40px;
        }
        
        .serve-box span {
            font-size: 14px;
        }
        
        .serve-box p {
            font-size: 14px;
            margin-top: 30px;
        }
        
        .serve-box .serve-fuwu {
            width: 100px;
            height: 20px;
            border: 1px solid black;
            position: absolute;
            top: -4px;
            left: 67px;
        }
        
        .serve-box2 {
            width: 403px;
            height: 125px;
            position: relative;
            margin-top: 30px;
        }
        
        .serve-box2 span {
            display: block;
            float: left;
            font-size: 14px;
            height: 40px;
            line-height: 40px;
        }
        
        .serve-box2 input {
            float: left;
            width: 77px;
            height: 38px;
            text-align: center;
            line-height: 40px;
            color: #8d8d8d;
            border-right: 1px solid #d4d4d4;
        }
        
        .serve-box2 .input-box {
            float: left;
            height: 38px;
            border: 1px solid #d4d4d4;
        }
        
        .serve-box2 .input-box a {
            display: block;
            float: left;
            width: 38px;
            height: 100%;
            line-height: 34px;
            text-align: center;
            background: #fff;
            font-size: 24px;
            color: #8d8d8d;
        }
        
        .serve-box3 {
            height: 100px;
            border: 1px solid black;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        
        .shoppingbnt {
            display: block;
            float: left;
            margin-top: 35px;
            width: 178px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            position: relative;
            top: 38px;
            left: -224px;
            background-color: red;
        }
        
        .QR {
            display: block;
            float: left;
            margin-top: 35px;
            width: 178px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            position: absolute;
            top: 37px;
            left: 145px;
        }
        
        .QR img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="top-contianer">
            <ul class="top-left">
                <li><a href="#">长虹官网</a> </li>
                <li><a href="#">关于长虹</a> </li>
                <li><a href="#">投资者关系</a> </li>
                <li><a href="#">商务合作</a> </li>
                <li>
                    <a href="#"> <img src="https://images.changhong.com/chgw/images/en_icon.png" alt=""> English</a>
                </li>
            </ul>
            <div class="top-right">
                <div class="right-left">
                    <a href="http://10.31.163.77/changhong/src/login.html">登录</a>
                    <span>|</span>
                    <a href="http://10.31.163.77/changhong/src/registry.html">注册</a>
                </div>
                <div class="admin" style="display: none;">
                    <span>:欢迎光临</span>
                    <a href="#"></a>
                </div>
                <div class="box">
                    <a href="">
                        <div class="riht-changhong"><img src="" alt=""> 我的长虹</div>
                    </a>
                    <a href="">
                        <div class="riht-youpin">虹创有品</div>
                    </a>
                    <a href="">
                        <div class="riht-gouwuche">购物车</div>
                    </a>
                </div>
            </div>
        </div>
        <div class="nav-binbox">
            <div class="nav-box">
                <div class="nav-log">
                    <a href="#">
                        <img src="https://cn.changhong.com/gwsy/images/P020161125568572860644.png" alt="">
                    </a>
                </div>
                <div class="nav-nav">
                    <ul>
                        <a href="">
                            <li class="cur">首页</li>
                        </a>
                        <a href="">
                            <li>电视</li>
                        </a>
                        <a href="">
                            <li>空调</li>
                        </a>
                        <a href="">
                            <li>冰箱</li>
                        </a>
                        <a href="">
                            <li>洗衣机</li>
                        </a>
                        <a href="">
                            <li>生活家电</li>
                        </a>
                        <a href="">
                            <li>服务</li>
                        </a>
                    </ul>
                </div>
                <div class="nav-left">
                    <input type="text" name="" id="" value="搜索" class="nav-input1">
                    <input type="button" class="nav-input2">
                </div>
            </div>
        </div>
        <div class="goodsinfo">

            <div class="bingbox">
                <div class="wrap">
                    <!-- 小图 -->
                    <div id="spic">
                        <img src="" alt="">
                        <!--小放-->
                        <div id="sf"></div>
                    </div>
                    <!-- 大放 -->
                    <div id="bf">
                        <!-- 大图 -->
                        <img src="" alt="" id="bpic">
                    </div>

                    <div id="ulist">
                        <a href="javascript:;" id="left">&lt;</a>
                        <div id="list">
                            <ul>
                                <!-- 这里是小图的位置，渲染 -->
                            </ul>
                        </div>
                        <a href="javascript:;" id="right">&gt;</a>
                    </div>
                </div>
                <div class="goodsinfo-word">
                    <hr>
                    <div class="p-name">
                        <h2>
                            <a class="loadtitle" href="##"></a>
                        </h2>
                        <p>杜比视界 无边框全面屏</p>
                    </div>
                    <hr>
                    <div class="p-price"><strong><em>￥</em><i class="loadpcp"></i></strong></div>
                    <hr>
                    <div class="serve-box">
                        <span>配送地址：</span>
                        <div class="serve-fuwu"></div>
                        <p>服务信息: 由长虹官方发货，并提供售后服务</p>
                    </div>
                    <hr>
                    <div class="serve-box2">
                        <span>商品数量：</span>
                        <div class="input-box">
                            <a href="">-</a>
                            <input type="text" value="1" id="numkuang">
                            <a href="">+</a>
                        </div>

                        <a href="cartlist.html" class="shoppingbnt">加入购物车</a>
                        <a href="" class="QR"><img src="https://images.changhong.com/chgw/images/ewmicon_20200825_2.png" alt=""> 手机查看</a>
                    </div>

                </div>

            </div>
</body>

</html>